<template>
<div style="height: 6vh;background-color: #fff;padding:10px 20px">
  <span style="line-height: 60px;font-size: 20px;">围栏展示</span>
  <!-- 为返回按钮实现点击返回至上一页"电子围栏管理页" -->
  <el-button @click="router.push('/geofence')" type="primary" style="float: right;margin-top: 13px;">返回</el-button>
</div>
  <div style="width: 100%;height: 84vh;" id="mapContainer"></div>


</template>

<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

//定义电子围栏对象
const geofence = ref({
  name: "",
  position:'',
})
//生明全局的地图变量
var map;

onMounted(()=>{
  //nextTick表示在DOM更新后执行，确保地图能在div创建之后渲染
  nextTick(()=>{
    //创建地图实例，放入之前准备好的容器里
    //注意BMapGL不需要导入，忽略提示
    map = new BMapGL.Map("mapContainer")
    showGeofence()
  })
})

const geofenceId = new URLSearchParams(window.location.search).get('id')
const showGeofence =  () => {
  axios.get(BASE_URL+'/v1/geofence/select?id='+geofenceId).then(res =>{
    if(res.data.code === 2000){
      //加载地图数据坐标点
      let data=JSON.parse(res.data.data[0].position)
      //定义一个遮盖物
      let overlayShow;
      //判断是矩形还是圆形
      if(data.type === 'circle'){
        //创建圆形传入之前保存的圆形地址的中心坐标和半径并设计边的颜色，宽度和透明度
        overlayShow =new BMapGL.Circle(
            new BMapGL.Point(data.longitude,data.latitude),
            data.radius,{strokeColor:'green',strokeWeight:2,strokeOpacity:1});
        let point = new BMapGL.Point(116.4047,39.9024);
        //初始化地图，设置中心点坐标和地图级别
        //中心点设置为圆形圆心
        map.centerAndZoom(point,15);
        map.addOverlay(overlayShow)
      }else{
        let points = data.recPoints.split(',');
        let vertexes = [];
        //遍历循环将图片转化为坐标点
        for(let i=0;i<points.length;i++){
          if(i==0){
            //设置中心点为第一个顶点
            let point = new BMapGL.Point(points[i].split('-')[0],points[i].split('-')[1])
            //初始化地图，设置中心点坐标和地图级别
            map.centerAndZoom(point,15);
          }
          vertexes.push(new BMapGL.Point(points[i].split('-')[0],points[i].split('-')[1]))
        }
        //创建多边形（矩形就是一个多边形），传入之前保存的中心点坐标和半径，并设置边框颜色，边框宽度和透明度
        overlayShow = new BMapGL.Polygon(vertexes,{strokeColor:'green',strokeWeight:2,strokeOpacity:1})
      }
      map.addOverlay(overlayShow)
    }else {
      ElMessage.error(res.data.message)
    }
  })
}


</script>

<style scoped>

</style>